<!--
 * @Author: Wangtao
 * @Date: 2022-09-02 16:51:04
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-02 19:48:46
-->
<template>
<div class="time-line-item">
  <div class="time">{{time}}</div>
  <div class="content" :class="{ hasTime: time }">
    <slot></slot>
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'timeLineItem',
  components: {},
  props: {
    time: {
      type: String,
      default: ''
    }
  },
  // ----------------生命周期-----------------------
  setup() {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {}
}

})
</script>

<style lang="stylus" scoped>
.time-line-item
  display: flex
  position: relative
  align-items: flex-start
  .time
    display: flex
    align-items: center
    font-weight: 400
    font-size: 12px
    color: rgba(0, 0, 0, 0.6)
    padding-right: 24px
    justify-content: flex-end
    width: 118px
  .content
    height: 100px
    display: flex
    align-items: center
    padding-left: 24px
    border-left: 1px solid rgba(30, 99, 245, 0.3);
    position: relative
  .hasTime:after
    display: block
    content: ''
    position: absolute
    width: 9px
    height: 9px
    border-radius: 50%
    background-color: var(--el-color-primary-dark)
    border: 2px solid #ffffff
    left: -5px
    box-sizing: border-box
</style>